/*
 * @Autor: 毛宇
 * @Date: 2021-06-01 17:00:00
 * @LastEditTime: 2021-06-04 16:00:00
 * @FilePath: \fby-web\src\pages\OutsideDoctor\index.js
 * @LastEditors: 毛宇
 * @Description: 转外就诊
 */

import React, { Component } from "react";
import {
	FileAddOutlined,
	SearchOutlined,
	FormOutlined,
	DeleteOutlined,
} from "@ant-design/icons";
import {
	Form,
	Col,
	Row,
	Input,
	Button,
	Popconfirm,
	message,
	Select,
} from "antd";
import "@ant-design/compatible/assets/index.css";
import "@/layouts/handleList.css";
import "@/layouts/queryList.css";
import "./EditItem/style.css";
import moment from "moment";
import MyTable from "../../components/MyTable";
import BtnPermission from "../../components/BtnPermission";
import EditItem from "./EditItem";
import { OutsideDoctorApi, institutionsApi,ygxxApi } from "@/services/basic";
const InputGroup = Input.Group;
const Option = Select.Option;


class OutsideDoctor extends Component {
	constructor(props) {
		super(props);
		this.state = {
			data: [], //data就是最顶层的数据 它包含records records是每条列表数据的集合 data还包含了其他信息 譬如总页数 当前页等等
			records: [],
			handlers: {
				create: "create",
				view: "view",
				update: "update",
			}, //定义操作类型
		};
	}
	//组件挂载后为列表请求数据
	componentDidMount = () => {
		this.queryData();
	};

	//页码变化的时候，请求数据
	onChange = (pagination) => {
		this.queryData(pagination);
	};
	//增、改一条数据后刷新列表
	editItemDone = () => {
		this.queryData();
	};

	//增查改、设置操作类型，并传入对应行数据
	setHandler = (handler, record) => {
		this.EditItemRef.showModal(handler, record);
	};

	//删除一条数据后刷新列表
	deleteItem = (record) => {
		OutsideDoctorApi.delete(record.id).then((res) => {
			this.queryData();
		});
	};

	//查找框查找数据
	queryData = (pagination = undefined) => {
		let formData = this.form.getFieldsValue();
		formData.wzsj = formData.wzsj && moment(formData.wzsj).format("YYYY-MM-DD")
		formData = {
			...formData,
			ztbz: 1
		}
		OutsideDoctorApi.getPage({ formData, pagination, }).then((res) => {
			if (res.code === "0") {
				message.error("数据为空!");
			} else {
				for (let i = 0; i < res.data.records.length; i++) {
					res.data.records[i].wzsj = res.data.records[i].wzsj && moment(res.data.records[i].wzsj).format("YYYY-MM-DD");
				}
				this.setState({ data: res.data, records: res.data.records });
			}

		});

	};

	//人员输入时触发
	onygxxSearch = (value) => {
		if (value.charCodeAt(value.length - 1) === 32) {
			value = value.trim();
			ygxxApi.search({ search: `${value}` }).then((res) => {
				let ygxx = res.records.map((item) => (
					<Option key={item.gh} value={item.gh}>
						{item.xm}
					</Option>
				));
				this.setState({
					ygxx: ygxx,
				});
			});
		}
	};
	//公司机构输入时触发
	onInstitutionSearch = (value) => {
		if (value.charCodeAt(value.length - 1) === 32) {
			value = value.trim();
			institutionsApi.search({ search: `${value}` }).then((res) => {
				let institution = res.records.map((item) => (
					<Option key={item.yybm} value={item.yybm}>
						{item.yymc}
					</Option>
				));
				this.setState({
					institution: institution,
				});
			});
		}
	};

	render() {
		const { create, update } = this.state.handlers;
		const columns = [
			{ title: "账号名称", dataIndex: "hzxm" },
			{ title: "账号id", dataIndex: "sfzh" },
			{ title: "所属人", dataIndex: "ygxm" },
			{ title: "所属公司", dataIndex: "jgmc" },
			{
				title: "操作",
				key: "action",
				fixed: "right",
				render: (record) => (
					<span className="handleButton">
						{
							<FormOutlined
								title="修改"
								onClick={() => this.setHandler(update, record)}
								className="update-button"
							/>
						}
						{
							<Popconfirm
								title="确认删除?"
								onConfirm={() => this.deleteItem(record)}
							>
								<DeleteOutlined className="delete-button" />
							</Popconfirm>
						}
					</span>
				),
			},
		];
		return (
			<div className="queryList">
				<Form
					autoComplete="off"
					ref={(form) => (this.form = form)}
					layout="inline"
				>
					<InputGroup className="input-group">
						<Row gutter={24}>
							<Col span={5}>
								<Form.Item label="账号名称" name="hzxm">
									<Input allowClear placeholder="输入姓名" />
								</Form.Item>
							</Col>
							<Col span={5}>
								<Form.Item label="账号id" name="sfzh">
									<Input allowClear placeholder="输入名称" />
								</Form.Item>
							</Col>
							<Col span={4}>
								<Form.Item label="所属人" name="jbmc">
									<Select
										allowClear
										onSearch={this.onygxxSearch}
										placeholder="输入关键字按空格查找"
										filterOption={false}
										showSearch={true}
										notFoundContent={null}
										showArrow={false}
									>
										{this.state.ygxx}
									</Select>
								</Form.Item>
							</Col>
							<Col span={4}>
								<Form.Item label="所属公司" name="wzyymc">
									<Select
										allowClear
										onSearch={this.onInstitutionSearch}
										placeholder="输入关键字按空格查找"
										filterOption={false}
										showSearch={true}
										notFoundContent={null}
										showArrow={false}
									>
										{this.state.institution}
									</Select>
								</Form.Item>
							</Col>
							<Col span={2}>
								<Button
									onClick={(e) => this.queryData(e)}
									icon={<SearchOutlined />}
									className="search-button"
								>
									查询
								</Button>
							</Col>
							<Col span={2}>
								<Button
									icon={<FileAddOutlined />}
									className="addButton"
									onClick={() => this.setHandler(create)}
								>
									新增
								</Button>
							</Col>
						</Row>
					</InputGroup>
				</Form>
				<MyTable
					props={{
						columns,
						dataSource: this.state.records,
						data: this.state.data,
						setHandler: this.setHandler,
						onChange: this.onChange,
						// permission: this.props.permission,
					}}
				/>
				<div>
					<EditItem
						bookRender={this.props.bookRender}
						ref={(EditItemRef) => (this.EditItemRef = EditItemRef)}
						editItemDone={this.editItemDone}
						modalfoot={this.props.modalfoot}
					/>
				</div>
			</div>
		);
	}
}
export default BtnPermission(OutsideDoctor);
